<template>
  <div class="game-records">
    <div class="records-header">
      <h2>游戏记录</h2>
      <div class="tab-buttons">
        <button 
          @click="activeTab = 'records'" 
          :class="{ active: activeTab === 'records' }"
        >
          我的记录
        </button>
        <button 
          @click="activeTab = 'leaderboard'" 
          :class="{ active: activeTab === 'leaderboard' }"
        >
          排行榜
        </button>
      </div>
    </div>
    
    <div class="records-content">
      <!-- 加载状态 -->
      <div v-if="loading" class="loading-state">
        <div class="spinner"></div>
        <p>加载中...</p>
      </div>
      
      <!-- 错误状态 -->
      <div v-else-if="error" class="error-state">
        <p>{{ error }}</p>
        <button @click="loadData" class="retry-button">重试</button>
      </div>
      
      <!-- 我的记录 -->
      <div v-else-if="activeTab === 'records'" class="records-list">
        <div v-if="gameRecords.length === 0" class="empty-state">
          <p>暂无游戏记录</p>
        </div>
        <div v-else class="record-items">
          <div v-for="(record, index) in gameRecords" :key="index" class="record-item">
            <div class="record-date">{{ formatDate(record.createTime) }}</div>
            <div class="record-details">
              <div class="record-winner">
                <span class="label">获胜者:</span> 
                <span class="value">{{ record.winner?.name || '无' }}</span>
              </div>
              <div class="record-rounds">
                <span class="label">回合数:</span> 
                <span class="value">{{ record.rounds || '未知' }}</span>
              </div>
            </div>
            <div class="record-actions">
              <button @click="viewRecordDetails(record)" class="detail-button">
                查看详情
              </button>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 排行榜 -->
      <div v-else-if="activeTab === 'leaderboard'" class="leaderboard">
        <div v-if="leaderboard.length === 0" class="empty-state">
          <p>暂无排行数据</p>
        </div>
        <div v-else class="leaderboard-list">
          <div class="leaderboard-header">
            <div class="rank">排名</div>
            <div class="player">玩家</div>
            <div class="score">得分</div>
            <div class="date">日期</div>
          </div>
          <div v-for="(item, index) in leaderboard" :key="index" class="leaderboard-item">
            <div class="rank">
              <span :class="getRankClass(index)">{{ index + 1 }}</span>
            </div>
            <div class="player">{{ item.winner?.name || '未知玩家' }}</div>
            <div class="score">{{ item.winner?.money || 0 }}</div>
            <div class="date">{{ formatDate(item.createTime) }}</div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 记录详情弹窗 -->
    <div v-if="showRecordDetail" class="record-detail-modal">
      <div class="modal-content">
        <div class="modal-header">
          <h3>游戏记录详情</h3>
          <button @click="showRecordDetail = false" class="close-button">&times;</button>
        </div>
        <div class="modal-body">
          <div class="detail-item">
            <span class="label">日期:</span>
            <span class="value">{{ formatDate(selectedRecord?.createTime) }}</span>
          </div>
          <div class="detail-item">
            <span class="label">回合数:</span>
            <span class="value">{{ selectedRecord?.rounds || '未知' }}</span>
          </div>
          <div class="detail-item">
            <span class="label">获胜者:</span>
            <span class="value">{{ selectedRecord?.winner?.name || '无' }}</span>
          </div>
          
          <h4>玩家列表</h4>
          <div class="players-list">
            <div v-for="(player, idx) in selectedRecord?.players" :key="idx" class="player-item">
              <div class="player-name">{{ player.name }}</div>
              <div class="player-money">{{ player.money }}元</div>
              <div class="player-properties">
                <span class="label">拥有地产:</span>
                <span v-if="player.properties && player.properties.length > 0">
                  {{ player.properties.join(', ') }}
                </span>
                <span v-else>无</span>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button @click="showRecordDetail = false" class="close-button">关闭</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import gameService from '../services/gameService';

export default {
  name: 'GameRecords',
  setup() {
    const activeTab = ref('records');
    const gameRecords = ref([]);
    const leaderboard = ref([]);
    const loading = ref(false);
    const error = ref(null);
    const showRecordDetail = ref(false);
    const selectedRecord = ref(null);
    
    // 加载数据
    const loadData = async () => {
      loading.value = true;
      error.value = null;
      
      try {
        if (activeTab.value === 'records') {
          gameRecords.value = await gameService.getGameRecords();
        } else {
          leaderboard.value = await gameService.getLeaderboard();
        }
      } catch (err) {
        error.value = '加载数据失败: ' + (err.message || '未知错误');
      } finally {
        loading.value = false;
      }
    };
    
    // 格式化日期
    const formatDate = (dateStr) => {
      if (!dateStr) return '未知时间';
      
      const date = new Date(dateStr);
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
    };
    
    // 查看记录详情
    const viewRecordDetails = (record) => {
      selectedRecord.value = record;
      showRecordDetail.value = true;
    };
    
    // 获取排名样式
    const getRankClass = (index) => {
      if (index === 0) return 'rank-first';
      if (index === 1) return 'rank-second';
      if (index === 2) return 'rank-third';
      return '';
    };
    
    // 监听标签切换
    const watchTab = () => {
      loadData();
    };
    
    // 组件挂载时加载数据
    onMounted(() => {
      loadData();
    });
    
    return {
      activeTab,
      gameRecords,
      leaderboard,
      loading,
      error,
      showRecordDetail,
      selectedRecord,
      loadData,
      formatDate,
      viewRecordDetails,
      getRankClass,
      watchTab
    };
  },
  watch: {
    activeTab() {
      this.loadData();
    }
  }
};
</script>

<style scoped>
.game-records {
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin: 20px 0;
}

.records-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  border-bottom: 1px solid #eee;
  padding-bottom: 15px;
}

.records-header h2 {
  margin: 0;
  color: #333;
  font-size: 20px;
}

.tab-buttons {
  display: flex;
  gap: 10px;
}

.tab-buttons button {
  background-color: #f5f5f5;
  border: none;
  padding: 8px 16px;
  border-radius: 20px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.3s;
}

.tab-buttons button.active {
  background-color: #4CAF50;
  color: white;
}

.tab-buttons button:hover:not(.active) {
  background-color: #e0e0e0;
}

/* 加载状态 */
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left-color: #4CAF50;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 15px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* 错误状态 */
.error-state {
  text-align: center;
  padding: 30px 0;
  color: #e53935;
}

.retry-button {
  background-color: #e53935;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 10px;
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 40px 0;
  color: #757575;
}

/* 记录列表 */
.record-items {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.record-item {
  display: flex;
  align-items: center;
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 8px;
  transition: transform 0.2s;
}

.record-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.record-date {
  width: 180px;
  font-size: 14px;
  color: #666;
}

.record-details {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.record-winner, .record-rounds {
  display: flex;
  gap: 5px;
}

.label {
  color: #666;
  font-size: 14px;
}

.value {
  font-weight: 500;
  color: #333;
}

.record-actions {
  margin-left: 20px;
}

.detail-button {
  background-color: #2196F3;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.detail-button:hover {
  background-color: #1976D2;
}

/* 排行榜 */
.leaderboard-list {
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
}

.leaderboard-header {
  display: flex;
  background-color: #f5f5f5;
  padding: 12px 15px;
  font-weight: 500;
  color: #333;
}

.leaderboard-item {
  display: flex;
  padding: 15px;
  border-top: 1px solid #eee;
  transition: background-color 0.2s;
}

.leaderboard-item:hover {
  background-color: #f9f9f9;
}

.rank {
  width: 60px;
  text-align: center;
}

.rank-first {
  color: #FFD700;
  font-weight: bold;
  font-size: 18px;
}

.rank-second {
  color: #C0C0C0;
  font-weight: bold;
  font-size: 16px;
}

.rank-third {
  color: #CD7F32;
  font-weight: bold;
  font-size: 16px;
}

.player {
  flex-grow: 1;
}

.score {
  width: 100px;
  text-align: right;
  font-weight: 500;
}

.date {
  width: 180px;
  text-align: right;
  color: #666;
  font-size: 14px;
}

/* 记录详情弹窗 */
.record-detail-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background-color: white;
  border-radius: 8px;
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
}

.modal-header h3 {
  margin: 0;
  color: #333;
}

.close-button {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #666;
}

.modal-body {
  padding: 20px;
}

.detail-item {
  margin-bottom: 10px;
  display: flex;
  gap: 10px;
}

.modal-body h4 {
  margin-top: 20px;
  margin-bottom: 15px;
  color: #333;
}

.players-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.player-item {
  background-color: #f9f9f9;
  padding: 15px;
  border-radius: 8px;
}

.player-name {
  font-weight: 500;
  margin-bottom: 5px;
}

.player-money {
  color: #4CAF50;
  font-weight: 500;
  margin-bottom: 10px;
}

.player-properties {
  font-size: 14px;
}

.modal-footer {
  padding: 15px 20px;
  border-top: 1px solid #eee;
  text-align: right;
}

.modal-footer .close-button {
  background-color: #f5f5f5;
  color: #333;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 14px;
}
</style>